<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS变形及动画练习</title>
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/animate.css/4.1.1/animate.min.css" />
    <style>
        .flex-container {
            display: flex;
        }

        .box {
            background-color: rgb(38, 204, 23);
            height: 100px;
            width: 100px;
            line-height: 100px;
            text-align: center;
            border-radius: 8px;
        }

        .box-1 {
            transform: scale(1.5)
        }

        .box-1:hover {
            transform: scale(1);
            background-color: rgb(198, 204, 23);
            transition-property: all;
            transition-duration: 0.3s;
            transition-timing-function: ease-in;
            transition-delay: 1s;
        }

        .box-2 {
            transform: scale(1);
            background-color: rgb(198, 204, 23);
            transition: background 0.3s ease, transform 0.1s ease;
        }

        .box-2:hover {
            transform: scale(0.8, 1);
        }

        .box-3 {
            transform: rotate(20deg);
        }

        .box-4 {
            transform: rotateX(20deg);
        }

        .box-5 {
            transform: translate(20px);
        }

        .box-7 {
            transform: skewY(15deg) scale(.6);
        }

    </style>
</head>

<body>
    <h1 class="animate__animated animate__lightSpeedInRight">变形练习</h1>

    <h2>大小</h2>
    <div class="flex-container">
        <div class="original">
            <div class="spin">
                <figure class="box box-1">Box 1</figure>
            </div>
        </div>
        <div class="original">
            <div class="spin">
                <figure class="box box-2">Box 2</figure>
            </div>
        </div>
    </div>
    <h2>旋转</h2>
    <div class="flex-container">
        <div class="original">
            <div class="spin">
                <figure class="box box-3">Box 3</figure>
            </div>
        </div>
        <div class="original">
            <div class="spin">
                <figure class="box box-4">Box 4</figure>
            </div>
        </div>
        <div class="original">
            <div class="spin">
                <figure class="box">Box 4</figure>
            </div>
        </div>
    </div>
    <h2>位移</h2>
    <style>

    </style>
    <div class="flex-container">
        <div class="original">
            <div class="spin">
                <figure class="box box-5">Box 5</figure>
            </div>
        </div>
        <div class="original">
            <div class="spin">
                <figure class="box box-6">Box 6</figure>
            </div>
        </div>

    </div>

    <h2>组合</h2>
    <style>

    </style>
    <div class="flex-container">
        <div class="original">
            <div class="spin">
                <figure class="box box-7">Box 7</figure>
            </div>
        </div>
        <div class="original">
            <div class="spin">
                <figure class="box box-8">Box 8</figure>
            </div>
        </div>

    </div>

</body>

</html>
